<template>
	<div class="container">
		<!-- Sidebar -->
		<div class="sidebar">
			<div class="logo">学校管理系统LOGO</div>
			<div
				class="menu-item"
				:class="{ active: activeMenu === 'home' }"
				@click="setActiveMenu('home')"
			>
				<i class="icon">⌂</i>首页S;LAS;LKL;SDKKDSDSDSDSDF
			</div>
			<div
				class="menu-item"
				:class="{ active: activeMenu === 'academic' }"
				@click="setActiveMenu('academic')"
			>
				<i class="icon">📄</i>教务管理
			</div>
			<div
				class="menu-item"
				:class="{ active: activeMenu === 'classSchedule' }"
				@click="setActiveMenu('classSchedule')"
			>
				<i class="icon">📅</i>走班排课
			</div>
			<div class="submenu" v-show="activeMenu === 'classSchedule'">
				<div
					class="menu-item"
					:class="{ active: activeSubMenu === 'courseSetup' }"
					@click="setActiveSubMenu('courseSetup')"
				>
					选课设置
				</div>
				<div
					class="menu-item"
					:class="{ active: activeSubMenu === 'smartClass' }"
					@click="setActiveSubMenu('smartClass')"
				>
					智能分班
				</div>
				<div
					class="menu-item"
					:class="{ active: activeSubMenu === 'classSchedule' }"
					@click="setActiveSubMenu('classSchedule')"
				>
					走班排课
				</div>
			</div>
			<div
				class="menu-item"
				:class="{ active: activeMenu === 'attendance' }"
				@click="setActiveMenu('attendance')"
			>
				<i class="icon">⏰</i>考勤管理
			</div>
			<div
				class="menu-item"
				:class="{ active: activeMenu === 'homework' }"
				@click="setActiveMenu('homework')"
			>
				<i class="icon">📝</i>作业管理
			</div>
			<div
				class="menu-item"
				:class="{ active: activeMenu === 'resources' }"
				@click="setActiveMenu('resources')"
			>
				<i class="icon">💻</i>资源管理
			</div>
			<div
				class="menu-item"
				:class="{ active: activeMenu === 'config' }"
				@click="setActiveMenu('config')"
			>
				<i class="icon">⚙️</i>配置管理
			</div>
			<div
				class="menu-item"
				:class="{ active: activeMenu === 'system' }"
				@click="setActiveMenu('system')"
			>
				<i class="icon">⚙️</i>系统管理
			</div>
		</div>

		<!-- Main Content Area -->
		<div class="main-content">
			<!-- Breadcrumb -->
			<div class="breadcrumb">选课设置 / 创建选课</div>

			<!-- Steps -->
			<div class="steps">
				<div class="step" :class="{ active: activeStep === 1 }" @click="setActiveStep(1)">
					<div class="step-number">1</div>
					<span>基本信息</span>
				</div>
				<div class="step" :class="{ active: activeStep === 2 }" @click="setActiveStep(2)">
					<div class="step-number">2</div>
					<span>选课学生</span>
				</div>
				<div class="step" :class="{ active: activeStep === 3 }" @click="setActiveStep(3)">
					<div class="step-number">3</div>
					<span>选课设置</span>
				</div>
			</div>

			<!-- Toolbar -->
			<div class="toolbar">
				<button class="btn btn-primary">
					<span>+</span>
					添加学生
				</button>
				<button class="btn">
					<span>-</span>
					批量删除
				</button>
				<button class="btn">
					<span>-</span>
					全部删除
				</button>
				<div class="search-box">
					<input
						v-model="searchQuery"
						type="text"
						class="search-input"
						placeholder="请输入姓名、学号检索学生"
					/>
					<span class="search-icon">🔍</span>
				</div>
			</div>

			<!-- Selected Classes -->
			<div class="selected-classes">已选择班级：{{ selectedClasses.join('、') }}</div>

			<!-- Table -->
			<div class="table-container">
				<table>
					<thead>
						<tr>
							<th><input type="checkbox" class="checkbox" v-model="selectAll" /></th>
							<th>#</th>
							<th>姓名</th>
							<th>性别</th>
							<th>学号</th>
							<th>证件号码</th>
							<th>学校</th>
							<th>年级</th>
							<th>行政班级</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(student, index) in paginatedData" :key="student.id">
							<td>
								<input
									type="checkbox"
									v-model="selectedStudents"
									:value="student.id"
								/>
							</td>
							<td>{{ index + 1 }}</td>
							<td>{{ student.name }}</td>
							<td>{{ student.gender }}</td>
							<td>{{ student.studentId }}</td>
							<td>{{ student.idNumber }}</td>
							<td>{{ student.school }}</td>
							<td>{{ student.grade }}</td>
							<td>{{ student.class }}</td>
							<td>
								<button @click="deleteStudent(student.id)">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>

			<!-- Pagination -->
			<div class="pagination">
				<button class="page-btn" @click="changePage('prev')">«</button>
				<button
					class="page-btn"
					v-for="page in totalPages"
					:key="page"
					@click="changePage(page)"
					:class="{ active: currentPage === page }"
				>
					{{ page }}
				</button>
				<button class="page-btn" @click="changePage('next')">»</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// Sidebar and Header Data
				activeMenu: 'classSchedule',
				activeSubMenu: 'courseSetup',
				userName: 'Lisa',

				// Main Content Data
				activeStep: 1,
				searchQuery: '',
				selectedClasses: [
					'高一一班',
					'高一二班',
					'高一三班',
					'高一四班',
					'高二一班',
					'高三一班',
					'高三六班',
					'高三七班',
					'高三八班',
					'高三九班',
					'高三十班',
					'高三十一班',
					'高三十二班',
				],

				// Table Data
				students: [
					{
						id: 1,
						name: '张三',
						gender: '男',
						studentId: '10001',
						idNumber: '123456789',
						school: '学校A',
						grade: '高一',
						class: '一班',
					},
					{
						id: 2,
						name: '李四',
						gender: '女',
						studentId: '10002',
						idNumber: '123456790',
						school: '学校A',
						grade: '高一',
						class: '二班',
					},
					// Add more student data as needed
				],
				selectedStudents: [], // To track selected students
				selectAll: false, // To manage select all checkbox
				currentPage: 1,
				itemsPerPage: 5,
			}
		},
		computed: {
			totalPages() {
				return Math.ceil(this.students.length / this.itemsPerPage)
			},
			paginatedData() {
				const start = (this.currentPage - 1) * this.itemsPerPage
				const end = this.currentPage * this.itemsPerPage
				return this.students.slice(start, end)
			},
		},
		methods: {
			setActiveStep(step) {
				this.activeStep = step
			},
			setActiveMenu(menu) {
				this.activeMenu = menu
				this.activeSubMenu = ''
			},
			setActiveSubMenu(subMenu) {
				this.activeSubMenu = subMenu
			},
			changePage(page) {
				if (page === 'prev' && this.currentPage > 1) {
					this.currentPage--
				} else if (page === 'next' && this.currentPage < this.totalPages) {
					this.currentPage++
				} else if (typeof page === 'number') {
					this.currentPage = page
				}
			},
			deleteStudent(studentId) {
				this.students = this.students.filter((student) => student.id !== studentId)
			},
		},
		watch: {
			selectAll(newVal) {
				if (newVal) {
					this.selectedStudents = this.students.map((student) => student.id)
				} else {
					this.selectedStudents = []
				}
			},
			selectedStudents(newVal) {
				if (newVal.length === this.students.length) {
					this.selectAll = true
				} else {
					this.selectAll = false
				}
			},
		},
	}
</script>

<style scoped>
	/* Container for Sidebar and Main Content */
	.container {
		display: flex;
		height: 100vh;
	}

	/* Sidebar styles */
	.sidebar {
		width: 250px;
		background-color: #f4f4f4;
		padding: 20px 10px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.menu-item {
		padding: 15px;
		cursor: pointer;
		transition: background-color 0.3s ease;
		margin-bottom: 10px;
	}

	.menu-item.active {
		background-color: #007bff;
		color: white;
		border-radius: 10px;
	}

	.icon {
		margin-right: 8px;
	}

	.submenu {
		margin-left: 20px;
	}

	/* Main Content styles */
	.main-content {
		flex-grow: 1;
		padding: 20px;
		overflow: auto; /* Ensure content scrolls if needed */
	}

	.breadcrumb {
		margin-bottom: 20px;
	}

	.steps {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.step {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.step-number {
		background-color: #ff0000;
		color: white;
		border-radius: 50%;
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
	}

	.step.active {
		color: #007bff;
	}

	.toolbar {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.search-box {
		display: flex;
		align-items: center;
	}

	.search-input {
		padding: 5px;
		border: 1px solid #ccc;
	}

	.search-icon {
		margin-left: 10px;
		cursor: pointer;
	}

	.selected-classes {
		margin-top: 20px;
		color: #333;
	}

	/* Table Styling */
	.table-container {
		width: 100%;
		margin-bottom: 20px;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	th,
	td {
		padding: 10px;
		border: 1px solid #ddd;
		text-align: center;
	}

	.checkbox {
		width: 20px;
		height: 20px;
	}

	.page-btn {
		padding: 5px 10px;
		margin: 0 5px;
		cursor: pointer;
	}

	.page-btn.active {
		background-color: #007bff;
		color: white;
	}

	.page-btn:hover {
		background-color: #ddd;
	}

	/* Pagination */
	.pagination {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}
</style>
